<template>
  <div id="page-sms-recharge-confirm">
    <h2>短信充值 - 确认订单</h2>

    <Card class="mt50">
      <Row>
        <Col span="20" offset="2">
          <Row class="pt40 bb-1px">
            <Col span="20">
              <p>订单提交成功，请尽快付款！订单号：{{ form.reNo }}</p>
              <p>订单时间 {{ form.reTime | formatDate('YYYY-MM-DD HH:mm:ss')}}</p>
            </Col>
            <Col span="4">
              <p class="tr fs18">应付金额：<span class="red bold">{{ form.reMoney }}</span>元</p>
            </Col>
          </Row>
          <Row>
            <Col span="10" offset="2">
              <Form :model="form" :label-width="150" label-position="left" class="mt40" style="width: 450px; margin: 0 auto">
                <FormItem>
                  <h3 class="weixin-pay-icon"></h3>
                  <div class="qrcode-wrapper p10 b-1px">
                    <qrcode :info="qrcode.info" :size="180" v-if="qrcode.show"></qrcode>
                  </div>
                </FormItem>
                <FormItem>
                  <p class="blue" style="padding-left: 20px;">请使用微信扫描二维码支付</p>
                </FormItem>
              </Form>
            </Col>
            <Col span="10">
              <div class="weixin-mobile"></div>
            </Col>
          </Row>
        </Col>
      </Row>
    </Card>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import _ from 'underscore'
  import financeApi from '@/api/finance'
  import qrcode from '@/components/qrcode'

  export default {
    name: 'page-sms-recharge',
    components: {
      qrcode
    },
    data () {
      let orderId = this.$route.params.orderId
      return {
        isSubmiting: false,
        timer: null,
        qrcode: {
          show: false,
          info: ''
        },
        query: {
          pkRechargeDetail: orderId
        },
        form: {}
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    methods: {
      async detail () {
        let query = _.clone(this.query)
        query.paySign = 1
        const { body } = await financeApi.getSmsRechargeDetail(query)
        let reponseData = body.responseData
        this.form = reponseData
        this.qrcode.info = reponseData.payUrl
        this.qrcode.show = true
      },
      async check () {
        const { body } = await financeApi.getSmsRechargeDetail(this.form)
        if (body.responseData.reStatus === 0) {
          this.$router.push({path: '/finance/sms-recharge-success'})
        }
      }
    },
    mounted () {
      this.detail()
      this.timer = setInterval(() => {
        this.check()
      }, 3000)
    },
    destroyed () {
      clearInterval(this.timer)
    }
  }
</script>

<style lang="less">
  #page-sms-recharge-confirm {
    .weixin-pay-icon {
      width: 200px;
      height: 35px;
      background: url(../../assets/images/pages/finance/weixin-pay-icon.png) no-repeat;
      background-size: 148px auto;
      background-position: center center;
      margin-bottom: 25px;
    }

    .weixin-mobile {
      width: 320px;
      height: 415px;
      background: url(../../assets/images/pages/finance/weixin-mobile.png) no-repeat;
      background-size: cover;
    }

    .qrcode-wrapper {
      width: 200px;
      height: 200px;
      overflow: hidden;
      .qrcode {
        canvas {
          width: 180px;
          height: 180px;
        }
      }
    }
  }
</style>
